<script>

import {setRoutes} from "@/router";

export default {
  name: "Login.vue",
  data(){
    return{
      user:{},
      codeUrl:"",
      rules:{
        userName:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        code:[
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '验证码为四位', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getCode();
  },
  methods:{
    login(){
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          this.request.post("/user/login", this.user
          ).then(res=>{
            if(res.code===200){
              localStorage.setItem("user",JSON.stringify(res.data));
              localStorage.setItem("menuList",JSON.stringify(res.data.menuList));
              setRoutes();
              this.$router.push("/");
              this.$message.success("登录成功");
            }else{
              this.$message.error(res.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getCode(){
      this.request.get("/user/getCaptcha").then(res=>{
        if(res.code===200){
          this.codeUrl=res.data.codeUrl;
          this.user.uuid=res.data.uuid;
        }else{
          this.$message.error(res.msg);
        }
      })
    }
  }
}
</script>

<!--<template>-->
<!--  <div class="wrapper">-->
<!--    <h1 style="color:white;font-size:40px">后台管理系统</h1>-->
<!--    <div style="margin:200px auto;background-color: #fff;width:300px;height:350px;padding:20px;border-radius: 10px">-->
<!--      <div style="margin:20px 0;text-align: center;font-size:24px"><b>登 录</b></div>-->
<!--      <el-form status-icon :model="user" :rules="rules" ref="userForm">-->
<!--        <el-form-item prop="userName">-->
<!--          <el-input size="medium" style="margin:10px 0" prefix-icon="el-icon-user" v-model="user.userName"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item prop="password">-->
<!--          <el-input size="medium" style="margin:10px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-input size="medium" style="margin:10px 0;width: 110px" prefix-icon="el-icon-lock" show-password ></el-input><img  src='http://localhost:8088/user/getCaptcha' onclick="this.src='http://localhost:8088/user/getCaptcha'"  style="display:inline-block"/>-->
<!--        </el-form-item>-->
<!--        <div style="margin:10px 0;text-align:center">-->
<!--          <el-button type="primary" size="small" autocomplete="off" style="margin-right:40px" @click="login">登录</el-button>-->
<!--          <el-button type="primary" size="small" autocomplete="off" @click="$router.push('/register')">注册</el-button>-->
<!--        </div>-->

<!--      </el-form>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->
<template>
  <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: rgb(230, 233, 255)">
    <div style="display: flex; background-color: white; width: 50%; border-radius: 5px; overflow: hidden">
      <div style="flex: 1">
        <img src="@/assets/login.png" alt="" style="width: 100%">
      </div>
      <div style="flex: 1; display: flex; align-items: center; justify-content: center">
        <el-form :model="user" style="width: 80%" :rules="rules" ref="userForm">
          <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px">欢迎登录后台管理系统</div>
          <el-form-item prop="userName">
            <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号" v-model="user.userName"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码" v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div style="display: flex">
              <el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" size="medium"  v-model="user.code"  style="flex: 1" ></el-input>
              <div style="flex:1;height:35px;margin-left: 5px">
                <img  :src="codeUrl" title="看不清，换一张" @click="getCode"/>
                <span style="color: rgb(76, 156, 243); cursor: pointer" @click="getCode">换一张</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="login">登 录</el-button>
          </el-form-item>
          <div style="display: flex">
            <div style="flex: 1">还没有账号？请 <span style="color: #0f9876; cursor: pointer" @click="$router.push('/register')">注册</span></div>
            <div style="flex: 1; text-align: right"><span style="color: #0f9876; cursor: pointer" @click="$router.push('/retrieveAccount')">忘记密码</span></div>
          </div>
        </el-form>
      </div>
    </div>

  </div>
</template>
<style scoped>

</style>

